<template>
  <el-dropdown
    class="classify-dropdown"
    trigger="click"
    @command="handleSelectItem"
  >
    <!-- <i class="el-dropdown-link el-icon-arrow-down el-icon--right"></i> -->
    <span
      class="el-dropdown-link classify"
      :style="{ background: colors[selectIndex] }"
      >{{ selectItem.name }}</span
    >
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="(item, index) in dropDownList"
        :key="item.id"
        :command="index"
        >{{ item.name }}</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name: "ClassifyDropdown",
  props: {
      dropDownList: {
          type: Array
      },
    classifyId: {
      type: Number,
    },
    onChange: {
      type: Function,
    },
  },
  watch: {
      classifyId: {
          handler(value) {
              if(value) {
                  const index = this.dropDownList.findIndex(item => item.id === value)
                  this.selectItem = this.dropDownList[index]
                  this.selectIndex = index
              } else {
                  this.selectIndex = 0
                  this.selectItem = this.dropDownList[0]
              }
          },
          immediate: true
      }
  },
  data() {
    return {
      colors: ["mediumaquamarine", "#67C23A", "#E6A23C", "#4f9fee", "#f67070"],
      selectItem: {},
      selectIndex: 0,
    };
  },
  methods: {
    handleSelectItem(index) {
      this.selectIndex = index;
      this.selectItem = this.dropDownList[index];
      this.onChange(this.selectItem.id);
    },
    
  },
};
</script>
<style lang="scss">
.classify-dropdown {
  margin-top: -4px;
  .classify {
    display: inline-block;
    padding: 2px 4px;
    height: 34px;
    line-height: 29px;
    margin: 0;
    font-size: 12px;
    color: #fff;
    background: #1989fa;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid;
    border-color: currentColor;
    cursor: pointer;
    opacity: 0.8;
  }
}
</style>